<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>


<%-- <link rel="stylesheet" href="${basePath}/static/plugins/treeview/bootstrap-treeview.css">
<link rel="stylesheet" href="${basePath}/static/plugins/layer/skin/layer.css"> 
<link rel="stylesheet" href="${basePath}/static/plugins/uploadify/uploadify.css">--%>
<style type="text/css">
		.error-border{
			border:1px solid red;
			border-color:red;
		}
		.s{border:1px solid #ccc;}
		.list-group-tem-one{
			color:#000;
			background-color:#D9DFE5;
		}
		.list-group-item-tow{
			color:#000;
			background-color:#EBEDF1;
		}
		.s:HOVER {
			cursor:pointer;
			font-size:16px;
		}
		.s-click-item-one{
			background-color:#AACDDE;
			font-size:16px;
		}
		.s-click-item{
			background-color:#fff;
			font-size:16px;
		}
		.t:HOVER{
			cursor:pointer;
			font-size:16px;
		}
		.file {
		    position: relative;
		    display: inline-block;
		    background: #D0EEFF;
		    border: 1px solid #99D3F5;
		    border-radius: 4px;
		    padding: 4px 12px;
		    overflow: hidden;
		    color: #1E88C7;
		    text-decoration: none;
		    text-indent: 0;
		    line-height: 20px;
		}
		.file input {
		    position: absolute;
		    font-size: 100px;
		    right: 0;
		    top: 0;
		    opacity: 0;
		}
		.file:hover {
		    background: #AADFFD;
		    border-color: #78C3F3;
		    color: #004974;
		    text-decoration: none;
		}
		.f-tip{color:red;}
		.f-hide{display:none;}
</style>
<script type="text/javascript">
	var uploadPath = "${uploadPath}";
</script>
<section class="content-header">
	<ol class="breadcrumb">
		<li><i class="fa fa-dashboard"></i>系统设置</li>
		<li class="active">模板管理</li>
	</ol>
</section>
<div class="content">
	<div class="row">
		<!-- 模板类型1 -->
		<div class="col-md-4" style="padding-left:0px;">
			<div class="row" style="background-color:white;margin-left:15px;margin-right:15px;">
				<div class="col-sm-6 list-group-tem-one" style="padding:0px;">
					<div class="box box-solid list-group-tem-one" style="min-height:700px;margin-bottom:0px;">
						<div class="box-header with-border">
							<h3 class="box-title list-group-tem-one">类型列表</h3>
						</div>
		                <div class="box-body" style="padding:0px;">
							<ul class="list-group" >
								<c:forEach items="${list}" var="item">
									<li class="list-group-item list-group-tem-one s" data-id="${item.id}">
										${item.typeName}
									</li>
								</c:forEach>
							</ul>
		                </div>
		            </div>
				</div>
			<!-- 模板列表2 -->
				<div class="col-sm-6 list-group-item-tow" style="padding:0px;">
					<div class="box box-solid  list-group-item-tow" style="min-height:700px;margin-bottom:0px;">
						<div class="box-header with-border  list-group-item-tow">
							<h3 class="box-title list-group-item-tow">模板列表</h3>
							<div class="box-tools" >
								<!-- <button class="btn btn-primary">新增</button> -->
								<a href="javascript:;" id="addTemplate" class="btn btn-success" role="button">新增</a>
							</div>
						</div>
		                
		                <div class="box-body" style="padding:0px;">
							<ul class="list-group" id="secondList">
							</ul>
							<ul style="display:none;">
								<li id="secondTemplate" class="list-group-item list-group-item-tow t" data-id=""></li>
							</ul>
		                </div>
	                </div>
	            </div>
            </div>
		</div>
		
		<!-- 模板详情 -->
		<div class="col-sm-8" style="padding:0;min-height: 700px;background-color:white;">
			<div class="box box-solid">
				<div class="box-header with-border text-center">
					<h3 class="box-title">模板详情</h3>
				</div>
                
                <div class="box-body" id="templateDetail">
                	<form id="template-update-form">
	                	<div class="row text-center">
	                		<input type="hidden" name="id" />
	                		<input type="hidden" name="type" />
	                		<input type="hidden" name="isUpdate" value="true"/>
	                		<div class="form-group form-inline col-sm-12">
		                		是否开启提醒：<input type="checkbox" name="disabled" value="1"/>
	                		</div>
	                		<div class="form-group form-inline col-sm-6" >
		                		<label>模板名：</label><input class="form-control" name="templateName" /><span class="f-tip f-hide">*模板名称不能为空</span>
	                		</div>
	                		<div class="form-group form-inline col-sm-6">
		                		<label>模板简介：</label><input class="form-control" name="descript" />
	                		</div>
							<div class="form-group form-inline col-sm-6">
						    	<label  class="">模板上传：</label>
						    	<a href="javascript:;" class="file">选择文件
								    <input type="file" name="file" id="templateSelect2">
								</a>
								<span id="tmepFileName2" class="file-tip"></span>
					   		</div>
							<div class="form-group form-inline col-sm-12">
						    	<label  class="">模板预览：</label>
						    	<iframe src="" id="templateView" width="300" height="400">
						    		
						    	</iframe>
					   		</div>
	                		<%-- <div class="form-group form-inline col-sm-12">
		                		<img alt="" src="${basePath}/static/adminLTE/img/birthday.png" style="max-height:400px;max-width:300px;">
	                		</div> --%>
	                		<div class="form-group form-inline col-sm-12">
		                		<a role="button" href="javascript:;" class="btn btn-primary" id="saveTemplate">保存</a>  &nbsp; &nbsp;<button class="btn btn-danger" id="delTemplate">删除</button>
	                		</div>
	                	</div>
                	</form>
                </div>
            </div>
			
		</div>
	</div>
</div>
<div class="modal fade" id="template_modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" style="width:60%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			    <h4 class="modal-title">新增模板</h4>
		    </div>
			<div class="modal-body">
				<form id="template-form">
			        <div class="row" style="margin-top:20px;padding-left:20px;">
						<div class="form-group form-inline col-sm-5">
					    	<label class="">模板名称：</label>
				     		<input class="form-control" type="text" name="templateName" value="" placeholder="请输入模板名称">
				     		<span class="f-tip f-hide">*模板名称不能为空</span>
				   		</div>
				   		<div class="form-group form-inline col-sm-7">
					    	<label  class="">模板介绍：</label>
				     		<textarea class="form-control" name="descript" rows="2" cols="40" placeholder="请输入模板介绍"></textarea>
				   		</div>
					</div>
			        <div class="row" style="padding-left:20px;">
						<div class="form-group form-inline col-sm-5">
							<label>是否开启提醒：</label>
							<input type="checkbox" name="disabled" value="1">
				   		</div>
				   		<div class="form-group form-inline col-sm-7">
				   			<label>选择类型：</label>
							<select name="type" class="form-control">
								<c:forEach items="${list}" var="item">
									<option value="${item.id}">${item.typeName}</option>
								</c:forEach>
							</select>
				   		</div>
					</div>
			        <div class="row" style="padding-left:20px;">
						<div class="form-group form-inline col-sm-12">
					    	<label  class="">模板上传：</label>
					    	<a href="javascript:;" class="file">选择文件
							    <input type="file" name="file" id="templateSelect">
							</a>
							<span id="tmepFileName" class="file-tip"></span>
							<span class="f-tip f-hide">*请上传模板文件</span>
				   		</div>
					</div>
					<div style="width:100%;text-align:center">
						<button class="btn btn-warning" id="newTemplate" style="width:120px;margin-top:30px;">保存</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<%-- <script type="text/javascript" src="${basePath}/static/plugins/jquery.validate/jquery.validate.min.js"></script> --%>
<%-- <script type="text/javascript" src="${basePath}/static/plugins/uploadify/jquery.uploadify.min.js"></script> --%>
<script src="${basePath}/static/adminLTE/js/human/template.js"></script>
